<!--Template Name: vacayhome
File Name: single-blog.html
Author Name: ThemeVault
Author URI: 
License URI: license/-->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/icons/favicon.png"/>
    <title>vacayhome</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">
    <link href="fonts/antonio-exotic/stylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="css/lightbox.min.css">
    <link href="css/responsive.css" rel="stylesheet">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/lightbox-plus-jquery.min.js" type="text/javascript"></script>
    <script src="js/instafeed.min.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>
</head>
<body>
<div id="page">
    <!---header top---->
    <div class="top-header" th:if="${#session}!=null">
        <div th:if="${#session.getAttribute('username') eq null} "><span th:include="front_header_top::html"></span></div>
        <div th:if="${#session.getAttribute('username') ne null} "><span th:include="front_header_top_login::html"></span></div>
    </div>
    <div class="top-header" th:if="${#session}==null">
        <span th:include="front_header_top::html"></span>
    </div>
    <!--header--->
    <div id="space"></div>
    <header class="header-container">
        <div class="container">
            <div class="top-row">
                <div class="row">
                    <div class="col-md-2 col-sm-6 col-xs-6">
                        <div id="logo">
                            <!--<a href="index.html"><img src="images/logo.png" alt="logo"></a>-->
                            <a href="/indexs"><span>云廊</span>酒店</a>
                        </div>
                    </div>
                    <div class="col-sm-6 visible-sm">
                        <div class="text-right">
                            <button type="button" class="book-now-btn">Book Now</button>
                        </div>
                    </div>
                    <div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
                        <nav class="navbar navbar-default">
                            <div class="navbar-header page-scroll">
                                <button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle"
                                        type="button">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>

                            </div>
                            <div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
                                <ul class="list-unstyled nav1 cl-effect-10">
                                    <li><a data-hover="首页" href="/indexs"><span>首页</span></a></li>
                                    <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                                    <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                                    <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                                    <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                                    <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                                    <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <div class="col-md-2  col-sm-4 col-xs-12 hidden-sm">
                        <div class="text-right"><a href="/rooms">
                            <button type="button" class="book-now-btn">立即预订</button>
                        </a></div>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <!--end-->
    <section class="image-head-wrapper" style="background-image: url('images/banner2.jpg');">
        <div class="inner-wrapper">
            <h1></h1>
        </div>
    </section>
    <div class="clearfix"></div>

    <!--dinning-->
    <section class="blog">
        <div class="container">
            <div class="row">

                <div class="col-md-9 col-sm-8 col-xs-12">
                    <h2 class="blog-title-head">Lorem Ipsum Dolor Sit amet</h2>
                    <p class="user-info">Posted by <a>Admin</a> in <a>General</a> | <a>10 Comments</a></p>
                    <div class="blog-image-single margin-top-small">
                        <img src="images/banner2.png" class="img-responsive">
                    </div>
                    <p class="blog-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                        ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                        in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem
                        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit, sed do </p>

                    <div class="clearfix"></div>
                    <div class="single-bottom comment-form">
                        <h3>Leave your Comment</h3>
                        <form action="#" method="post">
                            <input type="text" class="form-control" name="Name" placeholder="Name" required="">
                            <input type="email" class="form-control" name="Email" placeholder="Email" required="">
                            <textarea class="form-control" name="Message" placeholder="Message Here...."
                                      required=""></textarea>
                            <input type="submit" class="submit-btn" value="Send">
                        </form>
                    </div>
                </div>
                <aside class="col-md-3 col-sm-4 col-xs-12">
                    <div class="blog-list">
                        <h4>Categories</h4>
                        <ul>
                            <li><a><i class="fa fa-caret-right"> </i>Lorem Ipsum is simply</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>Contrary to popular belief</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>It is a long established</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>There are many variations</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>But I must explain to you</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>At vero eos et accusamus</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>On the other hand</a></li>
                        </ul>

                        <div class="clearfix"></div>
                    </div>
                    <div class="blog-list">
                        <h4>Archives List</h4>
                        <ul>
                            <li><a><i class="fa fa-caret-right"> </i>July (15)</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>Oct (20)</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>November (8)</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>December (25)</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>August (9)</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>July (15)</a></li>
                            <li><a><i class="fa fa-caret-right"> </i>Mar (25)</a></li>
                        </ul>
                    </div>
                    <div class="blog-list1">
                        <h4>Popular Posts</h4>
                        <div class="blog-list-top">
                            <div class="blog-img">
                                <a><img class="img-responsive" src="images/Home/img1.jpg" alt=""></a>
                            </div>
                            <div class="blog-text">
                                <p><a>Lorem ipsum dolor sit amet, consectetuer</a></p>
                                <span class="link">
                                            Sep 14, 2016
                                        </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="blog-list-top">
                            <div class="blog-img">
                                <a><img class="img-responsive" src="images/Home/img3.jpg" alt=""></a>
                            </div>
                            <div class="blog-text">
                                <p><a>Lorem ipsum dolor sit amet, consectetuer</a></p>
                                <span class="link">
                                            Sep 14, 2016
                                        </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="blog-list-top">
                            <div class="blog-img">
                                <a><img class="img-responsive" src="images/Home/img4.jpg" alt=""></a>
                            </div>
                            <div class="blog-text">
                                <p><a>Lorem ipsum dolor sit amet, consectetuer</a></p>
                                <span class="link">
                                            Sep 14, 2016
                                        </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="blog-list-top">
                            <div class="blog-img">
                                <a><img class="img-responsive" src="images/Home/img5.jpg" alt=""></a>
                            </div>
                            <div class="blog-text">
                                <p><a>Lorem ipsum dolor sit amet, consectetuer</a></p>
                                <span class="link">
                                            Sep 14, 2016
                                        </span>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </section>
    <!--end-->
    <!---footer--->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12 width-set-50">
                    <div class="footer-details">
                        <h4>联系方式</h4>
                        <ul class="list-unstyled footer-contact-list">
                            <li>
                                <i class="fa fa-map-marker fa-lg"></i>
                                <p>中国海南省三亚市海棠湾海棠北路701号</p>
                            </li>
                            <li>
                                <i class="fa fa-phone fa-lg"></i>
                                <p><a href="tel:+1-202-555-0100"> +1-202-555-0100</a></p>
                            </li>
                            <li>
                                <i class="fa fa-envelope-o fa-lg"></i>
                                <p><a href="mailto:demo@info.com"> demo@info.com</a></p>
                            </li>
                        </ul>
                        <div class="footer-social-icon">
                            <a href="#"><i class="fa fa-facebook"></i></a>
                            <a href="#"><i class="fa fa-twitter"></i></a>
                            <a href="#"><i class="fa fa-instagram"></i></a>
                            <a href="#"><i class="fa fa-google-plus"></i></a>
                            <a href="#"><i class="fa fa-youtube-play"></i></a>
                        </div>
                        <div class="input-group" id="subscribe">
                            <input type="text" class="form-control subscribe-box" value="" name="subscribe"
                                   placeholder="EMAIL ID">
                            <span class="input-group-btn">
		                            <button type="button" class="btn subscribe-button"><i
                                            class="fa fa-paper-plane fa-lg"></i></button>
		                        </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12 width-50 width-set-50">
                    <div class="footer-details">
                        <h4>浏览</h4>
                        <ul class="list-unstyled footer-links">
                            <li><a data-hover="首页" href="/index"><span>首页</span></a></li>
                            <li><a data-hover="关于" href="/about"><span>关于</span></a></li>
                            <li><a data-hover="房间" href="/rooms"><span>房间</span></a></li>
                            <li><a data-hover="画廊" href="/gallery"><span>画廊</span></a></li>
                            <li><a data-hover="餐厅" href="/dinning"><span>餐厅</span></a></li>
                            <li><a data-hover="新闻" href="/news"><span>新闻</span></a></li>
                            <li><a data-hover="客服" href="/contact"><span>客服</span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 col-sm-12 col-xs-12">
                    <div class="footer-details">
                        <h4>Now On Instagram</h4>
                        <div class="row">
                            <div class="instagram-images">
                                <div id="instafeed"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="copyright">
                &copy; 2017 All right reserved. Designed by <a href="#" target="_blank">ThemeVault.</a>
            </div>

        </div>
    </footer>

    <!--back to top--->
    <a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
        <span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
        <span>Top</span>
    </a>

</div>
</body>
</html>

